<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router3.js"></script>
</head>
<body>
<!--
     路由切换时 如何实现参数的传递
     1.  queryString   ?
     2.  path         user/1


-->
<div id="app">
    <!--    路由出口-->
    <router-view></router-view>

    <router-link to="/login?username=root&password=123456">login</router-link>
    <router-link to="/register/root/123456">register</router-link>

    <hr>
    <router-link :to="{path:'/login',query:{username:'root',password:'123456'}}">login</router-link>
    <router-link :to="{name:'register',params:{username:'super',password:'123456'}}">register</router-link>

<!--    编程式切换路由参数的传递 参照router-link -->

</div>

<script>

    // 登录组件
    let Login = {
        template: `
            <div>
                     <h2>欢迎登录</h2>
                     <p>用户名:{{$route.query.username}}</p>
                     <p>密码:{{$route.query.password}}</p>
            </div>
        `,
        // data: function (){
        //   return{
        //       username:'tom'
        //   }
        // },
        created(){
            console.log("login created")
            // console.log(this.$router)   //路由管理对象
            console.log(this.$route)  //  当前路由对象
            // console.log(this.$route.query.username)
            // console.log(this.$route.query.password)

            // let {username,password} = this.$route.query
            // console.log(username)
            // console.log(password)

            let {query:{username,password}} = this.$route
            console.log(username)
            console.log(password)
        }
    }

    // 注册组件
    let Register = {
        template: `
            <div>

                     <h2>欢迎注册</h2>
                     <p>用户名:{{$route.params.username}}</p>
                     <p>密码:{{$route.params.password}}</p>

            </div>
        `,
        created(){
            console.log(this.$route)  //  当前路由对象
            console.log(this.$route.params.username)
            console.log(this.$route.params.password)
        }
    }

    // 2.定义路由  路由列表     路径 -> 组件  关系  path: 路径  component：组件
    const routes = [
        {path: '/', redirect: '/login'},  //  重定向
        {path: '/login', component: Login, name: 'login'},
        {path: '/register/:username/:password', component: Register, name: 'register'}
    ]

    //  3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })


    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })
</script>
</body>
</html>